<template>
  <div class="box">
    <div class="banner"></div>
    <div class="f2">
      <div class="f2_content">
        <div class="title">产品服务</div>
        <div class="list">
          <ul>
            <li :class="{ active: row == 1 }" @click="row = 1">
              <img src="@/assets/home/组30.png" alt="" />
              <h4>信用认证</h4>
            </li>
            <li :class="{ active: row == 2 }" @click="row = 2">
              <img src="@/assets/home/组31.png" alt="" />
              <h4>信用信息查询</h4>
            </li>
            <li :class="{ active: row == 3 }" @click="row = 3">
              <img src="@/assets/home/组32.png" alt="" />
              <h4>信用报告</h4>
            </li>
            <li :class="{ active: row == 4 }" @click="row = 4">
              <img src="@/assets/home/组33.png" alt="" />
              <h4>风险扫描</h4>
            </li>
          </ul>
        </div>
        <div class="content" v-show="row == 1">
          <div class="contentLeft">
            <img src="@/assets/home/组38.png" alt="" />
          </div>
          <div class="contentRight">
            <h3>信用认证</h3>
            <ul>
              <li>
                依托政府政策支持，以“信用大数据深度挖掘技术”与“自主学习型机器语言为主的全量化评价模型”为核心，信用理论为基础，围绕企业开展真实、高效、公正的信用认证服务。
              </li>
              <li>认证后期定时核验，确保认证准确性、真实性与权威性。</li>
            </ul>
            <div class="btn" @click="goAuthentication">去认证</div>
          </div>
        </div>
        <div class="content" v-show="row == 2">
          <div class="contentLeft">
            <img src="@/assets/home/组39.png" alt="" />
          </div>
          <div class="contentRight">
            <h3>信用信息查询</h3>
            <ul>
              <li>
                全面的企业信息，提供一站式的企业信息查询服务，涵盖工商信息、财务信息、人员信息、股权结构、法律诉讼等多个方面。
              </li>
              <li>
                实时的数据更新，依托广泛、权威的数据来源，提供最新、最准确的企业信息。
              </li>
              <li>提供多样化的查询方式，准确查找企业信息，决策有据可依。</li>
            </ul>
            <div class="btn" @click="goQuery">去查询</div>
          </div>
        </div>
        <div class="content" v-show="row == 3">
          <div class="contentLeft">
            <img src="@/assets/home/组40.png" alt="" />
          </div>
          <div class="contentRight">
            <h3>企业信用报告</h3>
            <ul>
              <li>多维度企业画像，提供企业全面、准确的综合信用信息。</li>
              <li>
                全面数据分析，详尽信用报告下载，快速洞察目标企业商业信用。
              </li>
              <li>判断企业信用等级，预测企业未来经营发展情况。</li>
            </ul>
            <div class="btn" @click="goReport">去查询</div>
          </div>
        </div>
        <div class="content" v-show="row == 4">
          <div class="contentLeft">
            <img src="@/assets/home/组41.png" alt="" />
          </div>
          <div class="contentRight">
            <h3>风险扫描</h3>
            <ul>
              <li>
                一键知风险，自定义风险等级，专业风险预警模型，经过人工智能算法对海量数据进行运算并亮灯。
              </li>
              <li>
                快速了识别企业潜在经营风险，帮助您直观了解企业的信用风险水平。
              </li>
            </ul>
            <div class="btn" @click="goBrran">去扫描</div>
          </div>
        </div>
      </div>
      <div class="f3_content">
        <div class="title">产品特色</div>
        <img src="@/assets/home/组36.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      row: 1,
    };
  },
  mounted() {},
  methods: {
    // 企业信用认证
    goAuthentication() {
      this.$router.push("/authentication");
    },
    //信用信息查询
    goQuery() {
      this.$router.push("/query/index");
    },
    // 企业信用报告查询
    goReport() {
      this.$router.push("/report");
    },
    // 风险扫描
    goBrran() {
      this.$router.push("/brran/riskqueryind");
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  box-sizing: border-box;
  padding-bottom: 80px;
  width: 100%;
  background-color: #f5f7fa;
  .banner {
    width: 100%;
    height: 520px;
    background: url(@/assets/home/banner.png) no-repeat;
    background-size: 100% 100%;
  }
  .f2 {
    width: 100%;
    .title {
      font-size: 30px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #181818;
      margin-top: 75px;
    }
    .f2_content {
      width: 1200px;
      margin: 0 auto;
      .list {
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #d4e3ec;
        margin-top: 30px;
        ul {
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          width: 852px;
          height: 100%;
          display: flex;
          li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            width: 110px;
            height: 100%;
            &.active {
              border-bottom: 3px solid #0a7be0;
            }
            img {
              width: 60px;
              height: 60px;
            }
            h4 {
              font-size: 18px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #181818;
            }
          }
        }
      }
      .content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 345px;
        margin-top: 40px;
        .contentLeft {
          width: 467px;
          height: 345px;
          img {
            width: 100%;
          }
        }
        .contentRight {
          position: relative;
          box-sizing: border-box;
          width: 708px;
          height: 345px;
          padding: 30px 34px;
          background-color: #fff;
          h3 {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #000000;
          }
          ul {
            box-sizing: border-box;
            padding: 0 34px;
            li {
              font-size: 16px;
              font-weight: 400;
              color: #333;
              line-height: 32px;
              margin-top: 15px;
            }
          }
          .btn {
            cursor: pointer;
            position: absolute;
            right: 56px;
            bottom: 39px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 160px;
            height: 38px;
            background: #0a7be0;
            border-radius: 4px;
            font-size: 18px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }
    }
    .f3_content {
      width: 1200px;
      margin: 0 auto;
      img {
        width: 100%;
        margin-top: 40px;
      }
    }
  }
}
</style>
